<template>
  <div class="maincontent">
    <div class="contentbox">
      <div class="printImg">
        <img src="@/assets/third/print.png" alt="">
      </div>
      <div class="addadvice">
        <div class="header">
          <div class="title">审查意见</div>
<!--          <div class="export">-->
<!--            <img src="../../../../assets/third/downloadlogo.png" />导出审查意见-->
<!--          </div>-->
        </div>
        <div v-if="!showadd">
          <div class="menulist">
            <div class="item" @click="chooseTab(true)" :class="tabSwitch ? 'active':'' ">复审意见</div>
            <div class="item" @click="chooseTab(false)" :class="!tabSwitch ? 'active':'' ">初审意见</div>
            <div class="add" v-show="tabSwitch" @click="addadvice">新增</div>
            <div style="clear:both;"></div>
          </div>
          <div class="advicelist" v-show="tabSwitch">
            <div class="item">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                <div class="msg">问题描述：部分内容缺失</div>
                <div class="msg">修改情况：
                  <el-radio v-model="radio" label="1">已修改</el-radio>
                  <el-radio v-model="radio" label="2">未修改</el-radio>
                </div>
              </div>
              <div class="other">
                <div class="date">2018/10/03</div>
                <div class="delete">删除</div>
              </div>
            </div>
            <div class="item">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                <div class="msg">问题描述：部分内容缺失</div>
                <div class="msg">修改情况：
                  <el-radio v-model="radio" label="1">已修改</el-radio>
                  <el-radio v-model="radio" label="2">未修改</el-radio>
                </div>
              </div>
              <div class="other">
                <div class="date">2018/10/03</div>
                <div class="delete">删除</div>
              </div>
            </div>
            <div class="item">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                <div class="msg">问题描述：部分内容缺失</div>
                <div class="msg">修改情况：
                  <el-radio v-model="radio" label="1">已修改</el-radio>
                  <el-radio v-model="radio" label="2">未修改</el-radio>
                </div>
              </div>
              <div class="other">
                <div class="date">2018/10/03</div>
                <div class="delete">删除</div>
              </div>
            </div>
          </div>

          <div class="advicelist" v-show="!tabSwitch">
            <div class="item">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                <div class="msg">问题描述：部分内容缺失</div>
                <div class="msg">修改情况：已修改</div>
              </div>
              <div class="other">
                <div class="date">2018/10/03</div>
                <div class="delete">删除</div>
              </div>
            </div>
          </div>
        </div>

        <el-form v-if="showadd" class="reviewIdea" :model="form" label-width="80px" style="margin-top:30px;">
          <el-form-item label="附件名称" >
            <el-select placeholder="请选择" v-model="form.name">
              <el-option label="可研究性报告" value="可研究性报告"></el-option>
              <el-option label="踏勘选址报告" value="踏勘选址报告"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述">
            <el-input type="textarea" v-model="form.question" rows="4">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="showadd=false">取消</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
        data() {
            return {
                form:{
                    name:'',
                    question:'',
                },
                showadd:false,
                radio:"1",
                tabSwitch: true
            };
        },

        created() {

        },
        methods: {
            onSubmit(){
                this.showadd = false;
            },
            addadvice(){
                this.showadd = true;
            },
            chooseTab (flag) {
                this.tabSwitch = flag
            }
        }
    };
</script>

<style lang="scss" scoped>
  .maincontent{
    padding: 20px 30px 40px;
    background: #ffffff;
    .contentbox{
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      // -webkit-align-items: center;
      // align-items: center;
      .printImg{
        width:33%;
        img{
          width: 100%;
          display: block;
        }
      }
      .addadvice{
        margin-left: 7%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        .header{
          margin-top: 24px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          padding: 30px 30px 20px;
          border-bottom: 1px solid #e4e4e4;;
          .title{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            font-size:18px;
            font-family:PingFang SC;
            font-weight:bold;
            line-height:25px;
            color: #4d4d4d;
          }
          .export{
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            line-height:20px;
            color: #737373;
            img{
              width: 12px;
              margin-right: 3px;
            }
          }
        }
        .menulist{
          margin-top: 20px;
          .item{
            width:88px;
            height:36px;
            background: #ffffff;
            line-height: 36px;
            text-align: center;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color: #999999;
            margin-right: 8px;
            float: left;
            cursor: pointer;
            &.active{
              background: #EEF3F8;
              color: #1D88F3;
            }
          }
          .add{
            float: right;
            width:60px;
            height:28px;
            background:rgba(64,158,255,1);
            border-radius:2px;
            text-align: center;
            line-height: 28px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color: #ffffff;
            margin-top: 4px;
            cursor: pointer;
            margin-right: 30px;
          }
        }
        .advicelist{
          margin-top: 10px;
          .item{
            padding: 20px 30px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            border-bottom: 1px solid #e4e4e4;
            .situation{
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              flex: 1;
              .msg{
                margin-top: 10px;
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #8c8c8c;
              }
            }
            .other{
              text-align: right;
              .date{
                height:18px;
                font-size:13px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:18px;
                color: #999999;
              }
              .delete{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                margin-top: 12px;
                color: #F92828;
                cursor: pointer;
              }
            }
          }
        }

        // form
        .reviewIdea {
          /deep/ .el-form-item__label {
            color: #8C8C8C;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>

